<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>编辑新楼盘</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
      <link rel="stylesheet" href="/backstage/css/add_house.css?v=1">
      <script type="text/javascript" src="/js/jquery.js"></script>
      <script type="text/javascript" src="/js/vue.js"></script>
      <script type="text/javascript" src="/backstage/lib/layui/layui.js" charset="utf-8"></script>
      <script type="text/javascript" src="/backstage/js/xadmin.js?v=2"></script>
      <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--&lt;!&ndash;[if lt IE 9]>-->
      <!--<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
      <!--<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
    <!--<![endif]&ndash;&gt;-->
  </head>

  <body >

    <div class="x-body" >

        <form action="" method="post" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>楼盘标题
                </label>
                <div class="layui-input-block">
                    <input type="text" id="title" name="title" value="{$details['title']}" maxlength="50" lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
            </div>

            <div id="main">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>缩略图
                    </label>
                    <div class="layui-input-inline">
                        <input type="button" id="thumb_img"  @click="showImgList('thumb_img',1)"  value="选择图片（单选）" class="self-btn" >
                        <img :src="imgPath+thumb_img" style="width:190px;margin:0 0 10px 20px;" alt="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>轮播展示图
                    </label>
                    <div class="layui-input-block" >
                        <input type="button" id="viewpager"  @click="showImgList('returnImgList',2)" value="选择图片（多选）" lay-verify="required"
                               autocomplete="off" class="self-btn">

                        <img  v-for="(item,index) in returnImgList" :src="imgPath+item" style="max-width:150px;margin:10px 10px 10px 20px;" alt="">

                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>楼盘户型
                    </label>
                    <div class="layui-input-block">

                        <div class="house-types" v-for="(item,index) in houseTypes">
                            <div class="house-type-img" @click="showImgList('houseTypes',1,index)">
                                <img :src="imgPath+item.img"  alt="点击选择户型图">
                            </div>
                            <div class="house-type-num">
                               <input type="number" v-model="item.fang" placeholder="几">房<input type="number" v-model="item.ting" placeholder="几">厅<input type="number" placeholder="几" v-model="item.wei">卫
                            </div>
                            <div class="house-type-area">
                              面积：<input type="number" v-model="item.total_area"> m²
                                <button type="button" @click="delHouseType(index)">取消</button>
                            </div>
                        </div>

                        <div class="add-house-type" @click="addHouseType">
                            <p>添加户型</p>
                            <img src="/backstage/images/icon-add.png" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    选择标签
                </label>
                <div class="layui-input-block">
                    {foreach name='labels' item='row' index='index'}
                    <input name='labels[]' class="house-label" lay-skin="primary" type="checkbox" {:in_array($row['id'],$details['labels'])?'checked="checked"':''} title="{$row['tag_name']}" value="{$row['id']}">
                    {/foreach}
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>面积范围
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="min_area" name="min_area" value="{$details['min_area']}" placeholder="最小面积" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
                <div style="float:left"> ~ &nbsp;</div>

                <div class="layui-input-inline">
                <input type="number" id="max_area" name="max_area" value="{$details['max_area']}" placeholder="最大面积" lay-verify="required"
                       autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span> 选择朝向
                </label>
                <div class="layui-input-inline">
                    <select name="direction">
                        {foreach name="aspect" item="row"}
                        <option value="{$row['aspect_id']}" {$details['direction']==$row['aspect_id']?'selected="selected"':''}>{$row['aspect_name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">

                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>楼层类型
                </label>

                <div class="layui-input-block">
                    <input type="radio" name="floor_type" value="1" {$details['floor_type']==1?'checked="checked"':''} title="低层" >
                    <input type="radio" name="floor_type" value="2" {$details['floor_type']==2?'checked="checked"':''} title="中层" >
                    <input type="radio" name="floor_type" value="3" {$details['floor_type']==3?'checked="checked"':''} title="高层" >
                </div>

            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>总楼层
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="floors" name="floors" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['floors']}">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>均价
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="unit_price" name="unit_price" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['unit_price']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>开盘时间
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="" name="open_time" value="{:date('Y-m-d',$details['open_time'])}" id="start" >

                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red"></span>开发商
                </label>
                <div class="layui-input-block">
                    <input type="text" id="developers" name="developers" maxlength="80"
                           autocomplete="off" class="layui-input" value="{$details['developers']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>选择坐标
                </label>
                <div class="layui-input-block" >
                    <!--<iframe src="" frameborder="0"></iframe>-->
                    {include file="common/baidu_map"}
                </div>

            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>坐标
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="lng" name="lng" value="{$details['lng']}"  placeholder="经度" readonly='readonly'
                            class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="lat" name="lat" value="{$details['lat']}"  placeholder="纬度"  readonly='readonly'
                            class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>楼盘地址
                </label>
                <div class="layui-input-block">
                    <input type="text" id="address" name="address" maxlength="200" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['address']}">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="name" class="layui-form-label" style="padding: 8px 0;">
                    <span class="x-red">*</span>最新楼盘时间
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="" name="new_houses_time" value="{:date('Y-m-d',$details['new_houses_time'])}" id="end" >

                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>产权年限
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="durable_years" name="durable_years" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['durable_years']}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red"></span>产权证
                </label>
                <div class="layui-input-block">
                    <input type="text" id="exequatur" name="exequatur" maxlength="50"
                           autocomplete="off" class="layui-input" value="{$details['exequatur']}">
                </div>
            </div>


            <input type="hidden"  name="area_id" value="{$details['area_id']}">


            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>小区名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="uptown" name="uptown" required="" maxlength="30" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['uptown']}">
                </div>
            </div>



            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>简介
                </label>
                <div class="layui-input-block">
                    <input type="text" id="intro" name="intro"  value="{$details['intro']}" maxlength="100" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"> <span class="x-red">*</span>车位情况</label>
                <div class="layui-input-block">

                    {foreach  name="carport_types" item="row" index='index'}
                    <input type="radio" name="carport_type" value="{$index}" {$details['carport_type']==$index?"checked='checked'":''} title="{$row}" >
                   {/foreach}
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>售卖情况
                </label>
                <div class="layui-input-block">

                    <input type="radio" name="sell_state" value="1" {$details['sell_state']==1?"checked='checked'":''} checked="checked" title="正常" >
                    <input type="radio" name="sell_state" value="2" title="售罄"  {$details['sell_state']==2?"checked='checked'":''}>

                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span> 房屋用途
                </label>
                <div class="layui-input-inline">
                    <select name="use_type">
                        {foreach name="purpose" item="row"}
                        <option value="{$row['prupose_id']}" {$details['use_type']==$row['prupose_id']?"selected='selected'":''}>{$row['title']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red"></span> 优惠券
                </label>
                <div class="layui-input-inline">
                    <select name="coupon_id">
                        <option value="">默认没有</option>

                        {foreach name="coupons" item="row"}
                        <option value="{$row['id']}" {$details['coupon_id']==$row['id']?"selected='selected'":''}>{$row['coupon_name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span> 经纪人
                </label>
                <div class="layui-input-inline">
                    <select name="broker_id">

                        {foreach name="brokers" item="row"}
                        <option value="{$row['id']}" {$details['broker_id']==$row['id']?"selected='selected'":''}>{$row['broker_name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>在售数量
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="on_sale_num" name="on_sale_num" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{$details['on_sale_num']}">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>交房时间
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input "  name="check_out_time" id="datetime" value="{:date('Y-m-d',$details['check_out_time'])}">

                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-block">

                    <input type="radio" name="off" value="1" {$details['off']==1?'checked="checked"':''} title="上架" >
                    <input type="radio" name="off" value="2" {$details['off']==2?'checked="checked"':''} title="下架" >

                </div>
            </div>
            <div class="layui-form-item">
                <label for="name" class="layui-form-label" style="padding: 8px 0;">
                    更新时间
                </label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder='默认' value="{:date('Y-m-d',$details['update_time'])}" name="update_time" id="update_time" >

                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">
                    详情介绍
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="description" name="description" maxlength="500" class="layui-textarea">{$details['description']}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="add" type="button">提交修改</button>
          </div>
              <!--{:token()}-->

            <input type="hidden" value="{$details['id']}" name="id">
        </form>
    </div>
  </body>
  <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZDue9gF4HfumIt5DcwU0INw1ODmRcV16"></script>-->
  <!--<script src="/backstage/js/baiduMap.js"></script>-->


  <script>

      layDate();
      layui.use(['form','layer'], function(){
          $ = layui.jquery;
        var form = layui.form
        ,layer = layui.layer;

        //监听提交
        form.on('submit(add)', function(data){

            console.log(data);

            var data = data.field;

            if(data.lng==''){
              msg('请重新选择坐标');return ;
            }


            if(data.floors<1){
              msg('总楼层不能少于1');return;
            }

            if(data.min_area<1 || data.max_area<1){
               msg('面积不能少于1'); return;
            }

            if(parseInt(data.max_area)<parseInt(data.min_area)){
                msg('最大面积必须大于最小面积');return;
            }
            if(data.on_sale_num<0 ){
                msg('在售数量不能为负数'); return;
            }
            if(data.unit_price<0 ){
                msg('均价不能为负数'); return;
            }
            if(data.durable_years<0 ){
                msg('产权年限不能为负数'); return;
            }


            if(app.thumb_img==''){
                msg('请选择缩略图'); return;
            }

            var viewPage = app.returnImgList;

            if(viewPage.length==0){
                msg('请选择轮播展示图'); return;
            }

            data.thumb_img = app.thumb_img;
            data.viewpager = viewPage;

            console.log(viewPage);


            //重构所有户型
            var houseTypes = app.houseTypes;

//            console.log(houseTypes);
            var types = [];

            if(houseTypes.length<1){
                msg('请添加楼盘户型');return;
            }
            for(k in houseTypes){
console.log(k);
                if(houseTypes[k].img=='' ||　houseTypes[k].fang=='' || houseTypes[k].ting=='' || houseTypes[k].wei=='' ||　houseTypes[k].area==''){
                    msg('请完善楼盘户型');return;
                }

                types.push(
                    {
                        img:houseTypes[k].img,
                        title:houseTypes[k].fang+'房'+houseTypes[k].ting+'厅'+houseTypes[k].wei+'卫',
                        total_area:houseTypes[k].total_area
                    }
                )

            }


            data.house_types = types;

//            console.log(data);


            $.post('{:config("template.root_path")}/newhouse/update/{$details["id"]}',data,function(res){
              if(res.code=='200'){
                    // 获得frame索引
                   var index = parent.layer.getFrameIndex(window.name);
                      //关闭当前frame

                  if(index){
                      //关闭当前frame
                      parent.layer.close(index);
                      parent.layer.msg("修改成功", {icon: 6,time:800});
                      parent.app.getListData();
                      parent.app.page();
                  }else{
                      layer.msg("修改成功", {icon: 6,time:1500});
                      window.location.reload();
                  }

              }else{
                  layer.msg(res.msg, {icon: 5,time:1500});
              }

          },'json');

        });

      });


      function msg(text){
          layer.msg(text, {icon: 2,time:1500});

      }



      console.log('label', $('.house-label'));

      $('.house-label').each(function(k){

        if($(this).attr('checked')){
            $(this).next('div').addClass('layui-form-checked');

        }

      })

      //获取选择的图片
      var app = new Vue({
        el:'#main',
        data: {
          imgPath:'{:config("api.oss_img_path")}',
          thumb_img:'{$details["thumb_img"]}',
          returnImg:'',
          returnImgList:[],
          houseTypes:[],
          flag:'',
          houseTypeIndex:0
        },
        methods:{

          //处理从图片弹层传递过来的图片
          getImg:function(){

            console.log('flag',this.flag);
              switch (this.flag){
                case 'thumb_img':
                  this.thumb_img=this.returnImg;
                  break;
                case 'houseTypes':
                  this.houseTypes[this.houseTypeIndex].img = this.returnImg;
                  break;
              }
          },


          //添加户型
          addHouseType:function(){
            console.log(this.houseTypes);
            var type={img:'',fang:'',ting:'',wei:'',total_area:''};
            this.houseTypes.push(type);
          },


          //取消户型
          delHouseType:function(index){
            this.houseTypes.splice(index,1);
          },

          //弹出图片选择列表
          showImgList(flag,sel,index=0){


            this.houseTypeIndex=index;
            this.flag=flag;
            console.log(flag,sel);

            var selTitle = sel==1?'（单选）':'（多选）';

            x_admin_show('选择图片'+selTitle,'{:config(\'template.root_path\')}/resource/image_folder'+'?sel='+sel);
          }



        },
        created: function () {
           this.returnImgList = <?php echo $details["viewpager"]?>;

           var types = <?php echo $details['house_types']?>;

            for(k in types){

                types[k].fang = types[k].title.substr(0,1);
                types[k].ting = types[k].title.substr(2,1);
                types[k].wei = types[k].title.substr(4,1);
            }

            this.houseTypes=types;


        }
      });





  </script>

</html>